<template>
  <el-tabs
      class="group-tabs"
      v-model="active"
      type="card"
      :stretch="false"
      tab-position="top"
      @tab-click="tabClick"
  >
    <el-tab-pane class="group-tab-pane" label="客户端属性" name="attr">
      <AttributeList
        :ref="'attr'"
        :entry="entry"
        :hide-keys="hideKeys"
      />
    </el-tab-pane>
    <el-tab-pane class="group-tab-pane" label="菜单" name="menus">
      <MenuAssignTree
        :ref="'menus'"
        :comment="'分配给客户的菜单信息'"
        :entry="entry"
      />
    </el-tab-pane>
    <el-tab-pane class="group-tab-pane" label="权限" name="permits">
      <PermitAssignList
        :ref="'permits'"
        :entry="entry"
      >
        <template v-slot:comment>
          <div style="margin: 32px 0 16px 0; color: #252a2f">
            客户端还未分配任何权限，请点击下方按钮分配权限。
          </div>
        </template>
      </PermitAssignList>
    </el-tab-pane>
  </el-tabs>
</template>

<script setup lang="ts">
import {currentNames, SERVERS, TYPES} from '@/stores/conf'
import AttributeList from '@/views/sop/list/AttributeList.vue'
import PermitAssignList from '@/views/sop/assign/PermitAssignList.vue'
import MenuAssignTree from '@/views/sop/assign/MenuAssignTree.vue'

import '@/styles/tabs.css'
import {useListTabs} from "@/utils/sop/UseListTabs";
import {ref} from "vue";

const entry = ref({
  name: currentNames.CLIENT,
  type: TYPES.CLIENT,
  server: SERVERS.ASSET
});

const {active, tabClick, handleCurrent, handleSwitch} = useListTabs('attr');

const hideKeys = ref([
  'refreshTimeout',
  'accessTimeout',
  'secret',
]);

defineExpose({
  handleCurrent,
  handleSwitch,
})

</script>

<style scoped>
.el-form-item-class .el-form-item__label {
  font-size: 12px;
}

.group-tabs >>> .el-tabs__header {
  padding-left: 16px;
}

</style>
